<script setup lang="ts">
import { LOCALE_OPTIONS } from './locale/index'
// import countDownTime from '@/components/countDownTime.vue'
import countDownTime from './components/countDownTime.vue'
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'
const locales = ref(localStorage.getItem('locale') || 'en-US');

// 切换
const { locale, t } = useI18n()
const setChange = (val: any) => {
  // 往本地存一份
  localStorage.setItem('locale', val)
  locale.value = val
}

let list = [
  {
    id: '1',
    name: '1',
    endDate: '2024-04-03 23:59:59'
  },
  {
    id: '2',
    name: '2',
    endDate: '2024-03-22 18:00:00'
  }
]

// 时间结束
const downChange = (val: any) => {
  // 接收传递信息
  console.log(val)
}
</script>
<template>

  <div style="margin: 10px;">
    <div class="box">
      <h1>国际化</h1>
      <!-- 用于切换语言 -->
      <div class="status">
        <el-select style="width: 250px;" placeholder="请选择当前语言" v-model="locales" @change="setChange">
          <el-option v-for="item in LOCALE_OPTIONS" :key="item.value" :value="item.value" :label="item.label">{{
          item.label
        }}</el-option>
        </el-select>
      </div>
      <div class="btns">
        <el-button>{{ $t('menu.btn') }}</el-button>
        <el-button>{{ $t('menu.upload') }}</el-button>
      </div>
      <div class="tableList">
        <ul v-for="item in list" :item.id>
          <li>
            <div class="divs">
              <div style="width: 120px;">{{ $t('menu.index') }}:</div>
              <div style="flex: 1;">
                {{ item.id }}
              </div>
            </div>
          </li>
          <li>
            <div class="divs">
              <div style="width: 120px;">{{ $t('menu.activityName') }}:</div>
              <div style="flex: 1;">
                {{ $t('menu.activity') + 1 }}
              </div>
            </div>
          </li>
          <li>
            <div class="divs">
              <div style="width: 120px;">
                {{ $t('menu.activityCountdown')
                }}:</div>
              <div style="flex: 1;">
                <countDownTime :time="item.endDate" @downChange="downChange" />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import './app.scss'
</style>